<template>
<view>
<!--seckill_list.wxml-->
<view class="kill-time">
    <block v-for="(item, index) in killtime" :key="index">
        <view :class="index==timeac?'timeac':''" :data-index="index" @tap="changeTimeAc">
            <view>{{item.font}}</view>
            <view v-if="index==0">秒杀中</view>
            <view v-else>即将秒杀</view>
        </view>
    </block>
</view>
 <view class="container">
   <view class="left">
 {{time.text}}
  </view>
   <view class="right">
  {{time.over_time}}
  </view>
  </view>
<view class="kill-list">
    <block v-for="(item, index) in goodlist" :key="index">
        <view class="kill-item">
            <navigator class="kill-pic" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id + '&item_id=' + (item.item_id?item.item_id:0)"><image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=400&height=400'"></image></navigator>
            <view class="kill-cont">
                <navigator class="goods-name ellipsis-2" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id + '&item_id=' + (item.item_id?item.item_id:0)">{{item.goods_name}}{{item.key_name?item.key_name:''}}</navigator>
                <view class="goods-num">
                    <view>
                        <view class="co-red">￥{{item.price}}</view>
                        <view class="underline">￥{{item.shop_price}}</view>
                    </view>
                    <view class="kill-btn">
                        <navigator v-if="timeac==0" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id + '&item_id=' + (item.item_id?item.item_id:0)">
                         {{item.percent == 100 ? '已售馨':'去抢购'}}                      </navigator>
                        <navigator class="gray" v-else :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id + '&item_id=' + (item.item_id?item.item_id:0)">去购买</navigator>
                        <view class="classname">已抢{{item.percent}}%</view>
                    </view>
                </view>
            </view>
        </view>
    </block>
</view>
<view class="no-more">没有更多</view>
</view>
</template>

<script>
// seckill_list.js
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;
var util = require("../../../utils/util.js");
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: setting.url,
      killtime: null,
      currentPage: 1,
      timeac: 0,
      goodlist: null,
      timer: null //活动倒计时定时器

    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    load.init(this, '', 'goodlist');
    this.requestTime();
  },
  onPullDownRefresh: function () {
    this.reloadGoodList();
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestSalelist(this.killtime[this.timeac]);
    }
  },
  onUnload: function () {
    this.destroyActivityTimer();
  },
  methods: {
    changeTimeAc: function (e) {
      this.setData({
        timeac: e.currentTarget.dataset.index
      });
      this.reloadGoodList();
    },
    requestTime: function () {
      var that = this;
      request.post('/api/activity/flash_sale_time', {
        success: function (res) {
          var time = res.data.result.time;
          that.setData({
            killtime: time
          });
          that.requestSalelist(that.killtime[that.timeac]);
        }
      });
    },
    requestSalelist: function (time) {
      var that = this;
      var requestUrl = '/api/activity/flash_sale_list?p=' + that.currentPage + '&start_time=' + time.start_time + '&end_time=' + time.end_time;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        uni.stopPullDownRefresh();
      });
      that.destroyActivityTimer();
      that.createActivityTimer(time);
    },

    /** 创建活动倒计时定时器 */
    createActivityTimer: function (time) {
      var that = this;
      that.timer = setInterval(function () {
        that.overTime(time);
      }, 1000);
    },

    /** 销毁活动倒计时定时器 */
    destroyActivityTimer: function () {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    //倒计时
    overTime: function (time) {
      let text, over_time;
      var startTime = parseInt(new Date().getTime().toString().substring(0, 10)); //当前时间戳

      if (time.start_time > startTime) {
        text = '秒杀活动即将开场~';
        var remainTime = time.start_time * 1000 - new Date().getTime();
        remainTime = '距离开始' + util.remainTime(remainTime);
      } else {
        text = '正在秒杀，先下单先得哦~';
        var remainTime = time.end_time * 1000 - new Date().getTime();

        if (util.remainTime(remainTime) == '1秒' || remainTime == 1000) {
          load.init(this, '', 'goodlist');
          this.requestTime();
        } else {
          remainTime = '距离结束' + util.remainTime(remainTime);
        }
      }

      this.setData({
        'time.text': text,
        'time.over_time': remainTime
      });
    },
    //重置数据
    reloadGoodList: function () {
      load.resetConfig();
      this.goodlist = null;
      this.currentPage = 1;
      this.requestSalelist(this.killtime[this.timeac]);
    }
  }
};
</script>
<style>
/* seckill_list.wxss */
.kill-time{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90rpx;
    border-bottom:1px solid #f3f3f3;
    border-top:1px solid #f3f3f3;
    background-color: #fff; 
}
.kill-time>view{
    width: 20%;
    text-align: center;
    line-height: 30rpx;
    font-size: 24rpx;
    color: #555;
}
.kill-time>.timeac{
    color: #ff6a00;
}
.kill-item{
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding:10rpx 20rpx;
    margin-bottom: 10rpx;
}
.kill-pic{
    width: 200rpx;
    height: 200rpx;
}
.kill-cont{
    width: 480rpx;
}
.goods-name{
    height: 96rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    color: #555;
}
.goods-num{
    padding-top: 10rpx;
    display: flex;
    justify-content: space-between;
    line-height: 42rpx;
    font-size: 24rpx;
    color: #999;
}
.goods-num .co-red{
    font-size: 30rpx;
    font-weight: bold;
}
.underline{
    text-decoration: line-through;
}
.kill-btn{
    text-align: right;
}
.kill-btn>navigator{
    padding:0 20rpx;
    background: #ff6a00;
    color: #fff;
}
.kill-btn .gray{
    background-color: #555; 
}
.no-more{
    font-size: 30rpx;
    line-height: 2;
    text-align: center;
    color: #333;
}
/** 秒杀倒计时 */
.container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color:#fff;
  padding-bottom:0rpx;
}
.left {
  font-size:28rpx;
  padding:10px;
  color:red;
}

.right {
  font-size:28rpx;
  padding:10px;
}
</style>